<template>
    <div>
        <!--搜索框-->
        <div id="sousu">
            <el-form :inline="true" :model="restaurantSearch" class="demo-form-inline">
                <el-form-item label="店名">
                    <el-input v-model="restaurantSearch.restaurantName" placeholder="请输入店名搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
<!--        <div>-->
<!--            <el-button id="add" icon="el-icon-circle-plus-outline" type="success" size="mini" @click="addRestaurant()" round>添加</el-button>-->
<!--        </div>-->
        <div id="table">
            <el-table
                    border
            :data="restaurantTable" >
            <el-table-column
                    fixed
                    prop="rid"
                    label="id"
                    align="center"
                    font-size="8"
            >
            </el-table-column>
            <el-table-column
                    fixed
                    prop="restaurantName"
                    label="名称"
                    align="center"
                    font-size="8"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    align="center"
                    font-size="8"
            >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    align="center"
                    font-size="8"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    fixed="right"
                    label="操作"
                    width="400px"
            >
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" size="mini" @click="updateRestaurant(scope.row)" round>修改</el-button>
                    <el-button icon="el-icon-delete" type="warning" size="mini" @click="deleteRestaurant(scope.row)" round>删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
<!--        <div>-->
<!--            &lt;!&ndash;新增店铺&ndash;&gt;-->
<!--            <el-dialog-->
<!--                    title="新增店铺"-->
<!--                    :visible.sync="addRestaurantVisible"-->
<!--                    width="20%"-->
<!--                    height="100%"-->
<!--                    center>-->
<!--                <el-form  label-width="80px" :model="addRestaurantForm" ref = "addForm" :rules="addRules"  >-->
<!--                    <el-form-item label="店铺名" prop="restaurantName" >-->
<!--                        <el-input v-model="addRestaurantForm.restaurantName" placeholder="请输入店铺名"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="地址" prop="address" >-->
<!--                        <el-input v-model="addRestaurantForm.address" placeholder="请输入地址"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="电话" prop="phone" >-->
<!--                        <el-input v-model="addRestaurantForm.phone" placeholder="请输入电话"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="介绍" prop="remark" >-->
<!--                        <el-input v-model="addRestaurantForm.remark" placeholder="请输入店铺描述"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item  label="头像" prop="url">-->
<!--                        <el-upload-->
<!--                                class="avatar-uploader"-->
<!--                                action="http://192.168.1.37:7000/upload/upload"-->
<!--                                :show-file-list="false"-->
<!--                                :on-success="handleAvatarSuccess">-->
<!--                        <img v-if="addRestaurantForm.url" :src="addRestaurantForm.url" class="avatar">-->
<!--                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <span slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="addRestaurantVisible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="confirmAdd">确 定</el-button>-->
<!--                 </span>-->
<!--            </el-dialog>-->
<!--        </div>-->
        <div>
            <!--修改店铺-->
            <el-dialog
                    title="修改店铺"
                    :visible.sync="updateRestaurantVisible"
                    width="20%"
                    height="100%"
                    :before-close="handleClose"
                    center>
                <el-form  label-width="80px" :model="updateRestaurantForm" ref = "updateForm" :rules="addRules"  >
                    <el-form-item label="id" >
                        <el-input v-model="updateRestaurantForm.rid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="店铺名" prop="restaurantName" >
                        <el-input v-model="updateRestaurantForm.restaurantName" placeholder="请输入店铺名"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address" >
                        <el-input v-model="updateRestaurantForm.address" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone" >
                        <el-input v-model="updateRestaurantForm.phone" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍" prop="remark" >
                        <el-input v-model="updateRestaurantForm.remark" placeholder="请输入店铺描述"></el-input>
                    </el-form-item>
                    <el-form-item  label="头像" prop="url">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.1.37:7000/upload/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                            <img v-if="updateRestaurantForm.url" :src="updateRestaurantForm.url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateQs">取 消</el-button>
                    <el-button type="primary" @click="confirmUpdate">确 定</el-button>
                 </span>
            </el-dialog>
        </div>
        <!--分页组件-->
        <div id="pageHelper">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Restaurant",
        data(){
            return{
                restaurantSearch:{},
                restaurantTable:[],
                /*当前页数*/
                currentPage:1,
                /*每页显示条目个数*/
                pageSize:5,
                /*每页显示个数选择器的选项设置*/
                pageSizes:[5,10,15,20,25,30],
                //pageSizes:[1,2,3,4,5],
                /*总条目数*/
                total:0,
                // //添加店铺弹出框
                // addRestaurantVisible:false,
                // //添加店铺表单
                // addRestaurantForm:{},
                //添加店铺的表单验证
                addRules:{
                    restaurantName:[
                        { required: true, message: '请输入店铺名称', trigger: 'blur' },
                        { min: 2, max: 6, message: '长度在 2 到 8个字符', trigger: 'blur' }
                    ],
                    address:[
                        { required: true, message: '请输入地址', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
                    ],
                    phone:[
                        {required: true, message: '请输入电话', trigger: 'blur'},
                        {
                            pattern: /^1[23456789]\d{9}$/,
                            message: "电话号码格式不对",
                            trigger: 'blur'
                        }
                    ],
                    remark:[
                        {required: true, message: '请输入店铺描述', trigger: 'blur'}
                    ]
                },
                //修改店铺弹出框
                updateRestaurantVisible:false,
                //修改店铺表单
                updateRestaurantForm:{},
            }
        },
        created() {
            this.onSearch();
        },
        methods:{
            //删除店铺
            deleteRestaurant(row){
                this.$confirm('是否确定删除店铺?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                }).then(() => {
                    this.$http.post("/restaurant/restaurant/deleteRestaurant",row).then(result=>{
                        if (result.data.code===2000){
                            this.$message.success(result.data.msg);
                            this.onSearch();
                        } else if (result.data.code===5000){
                            this.$message.error(result.data.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改弹出框关闭
            handleClose(){
                this.updateRestaurantVisible=false;
                this.onSearch();
            },
            //取消修改
            updateQs(){
                this.updateRestaurantVisible=false;
                this.onSearch();
            },
            //确定修改
            confirmUpdate(){
                this.$refs['updateForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/restaurant/restaurant/updateRestaurant", this.updateRestaurantForm).then(result => {
                            if (result.data.code === 2000) {
                                this.$message.success(result.data.msg);
                                this.updateRestaurantVisible = false;
                            } else if (result.data.code === 5000) {
                                this.$message.error(result.data.msg);
                            }
                        })
                    }
                })
            },
            //修改店铺
            updateRestaurant(row){
                this.updateRestaurantVisible=true;
                this.updateRestaurantForm=row;
            },
            //确定添加
            confirmAdd(){
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/restaurant/restaurant/addRestaurant",this.addRestaurantForm).then(result => {
                            if (result.data.code === 2000) {
                                this.$message.success(result.data.msg);
                                this.onSearch();
                                this.addRestaurantVisible=false;
                            }else if (result.data.code===5000){
                                this.$message.error(result.data.msg);
                            }
                        })
                    }
                })
            },
            //上传头像
            handleAvatarSuccess(res, file){
                this.addRestaurantForm.url=res.data;
                this.updateRestaurantForm.url=res.data;
            },
            //添加店铺
            addRestaurant(){
                this.addRestaurantForm={};
                this.addRestaurantVisible=true;
            },
            //初始化页面及模糊查询
            onSearch(){
                this.$http.post("/restaurant/restaurant/selectAllByCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.restaurantSearch).then(result=>{
                    if (result.data.code===2000){
                        //console.log(result.data.data)
                        this.restaurantTable=result.data.data.records;
                        this.total=result.data.data.total;
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val){
                this.currentPage=1;
                this.pageSize=val;
                this.onSearch();
            },
            //currentPage 改变时会触发
            handleCurrentChange(val){
                this.currentPage=val;
                this.onSearch();
            },
        }
    }
</script>

<style>
    #sousu{
        float: left;
        position: relative;
        left: 10px;
        overflow: hidden;
    }
    /*.el-dialog__body{*/
    /*    height: 150px;*/
    /*}*/
    /*#table{*/
    /*    position: relative;*/
    /*    top: 40px;*/
    /*    height: 80%;*/
    /*}*/
    #add{
        z-index: 1;
        position: absolute;
        top: 150px;
        left: 220px;
    }
    #pageHelper{
        position: relative;
        top: 50px;
        float: right;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>